<template>
  <div>
    <el-form class="m7-form" :model="form" :rules="ruleSpareParts" ref="form" label-position="top">
      <el-form-item label="满意度名称" prop="name">
        <el-input
          v-model.trim="form.name"
          size="mini"
          placeholder="请输入"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        label="选择触发事件"
        prop="triggerEvent"
      >
        <el-select
          v-model="form.triggerEvent"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择触发条件"
        prop="filters"
      >
        <conditionForm
          :fieldsList="filterFieldList"
          :conditonList="form.filters"
          class="condition"
          type="filter"
        >
        </conditionForm>
      </el-form-item>
      <el-form-item
        label="选择满意度模版"
        prop="templateId"
      >
      <el-select
          v-model="form.templateId"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="满意度时效设置" prop="effectCount">
        <div class="tip">当超过设置的满意度时效，用户还未评价时，评价自动关闭</div>
        <div>
          <el-input-number :min="1" v-model="form.effectCount" :controls="false"></el-input-number>
          <el-radio-group v-model="form.unit" size="small" style="margin-left: 16px">
            <el-radio-button :label="1">分钟</el-radio-button>
            <el-radio-button :label="2">小时</el-radio-button>
            <el-radio-button :label="3">天</el-radio-button>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="选择发送渠道" prop="judgeTypeList">
        <el-checkbox-group v-model="form.judgeTypeList" size="small">
          <el-checkbox :label="1">公众号消息通知</el-checkbox>
          <el-checkbox :label="2">短信通知
            <el-tooltip class="item" effect="dark" content="启用后，会通过短信渠道，给此工单关联的联系人发送满意度问卷链接。" placement="right">
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></span>
            </el-tooltip>
          </el-checkbox>
        </el-checkbox-group>
        <div v-if="form.judgeTypeList.indexOf(2) > -1" class="sms-block">
          <div class="msg-templ">
            <el-select
              style="margin-right: 12px"
              v-model="form.smsSignId"
              placeholder="选择签名"
              filterable
            >
              <el-option
                v-for="item in smsSignList"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.smsTemplateId"
              placeholder="选择模版"
              filterable
            >
              <el-option
                v-for="item in smsTemplList"
                :key="item.id"
                :label="item.displayName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        <div class="sms-text" v-if="form.judgeTypeList.indexOf(2) > -1">
          <template v-if="getSmsSignMap[form.smsSignId]">【{{getSmsSignMap[form.smsSignId].displayName}}】</template>
          <template v-if="getSmsTemplMap[form.smsTemplateId]">{{getSmsTemplMap[form.smsTemplateId].content}}</template>
        </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import conditionForm from '@/afterSales/components/conditionFilter/conditionForm.vue';
import { busConfigStore } from '@/afterSales/views/config/serviceConfig/store/busConfigStore';
import { commonAction } from '@/utils/common';
interface Form {
  smsSignId: string
  smsTemplateId: string
  id?: string
  unit: number
  judgeTypeList: number[]
  effectCount: number | null
  filters: any
  triggerEvent: number
  name: string,
  templateId: string
}
@Component({
  name: 'addOrEditService',
  components: {
    conditionForm
  }
})
export default class SparePartsAddOrEdit extends Vue {
  @Prop() private id!: string
  @Prop({ default: () => ([]) }) private smsTemplList
  @Prop({ default: () => ([]) }) private smsSignList
  private options = Object.freeze([
    {
      label: '工单终止',
      value: 3
    },
    {
      label: '工单完成',
      value: 4
    }
  ])

  private list = []
  private $message: any
  private $route: any;

  private get filterFieldList () {
    return busConfigStore.list.filter(item => {
      return ['group'].indexOf(item.fieldType) === -1
    })
  }

  public form: Form = {
    smsSignId: '',
    smsTemplateId: '',
    judgeTypeList: [],
    effectCount: null,
    unit: 1,
    filters: [],
    triggerEvent: 3,
    name: '',
    templateId: ''
  }

  private get getSmsTemplMap () {
    const obj = {};
    this.smsTemplList.map((item) => {
      obj[item.id] = item;
    });
    return obj;
  }

  private get getSmsSignMap () {
    const obj = {};
    this.smsSignList.map((item) => {
      obj[item.id] = item;
    });
    return obj;
  }

  public saveConfirm () {
    (this.$refs as any).form.validate((valid) => {
      if (valid) {
        if (this.form.judgeTypeList.indexOf(2) > -1 && (!this.form.smsSignId || !this.form.smsTemplateId)) {
          this.$message.error('请选择签名和短信模版！')
          return false
        }
        const params = Object.assign({}, this.form, {
          modelId: this.$route.params.businessId
        })
        commonAction({ url: `/server-work/action/satisfaction/config/${this.form.id ? 'update' : 'insert'}`, method: 'post', data: params }).then(res => {
          if (res.success) {
            this.$message.success('成功！')
            this.$emit('success')
          }
        })
      } else {
        return false;
      }
    });
  }

  public init (data: Form) {
    if ((this.$refs as any).form) {
      (this.$refs as any).form.clearValidate()
    }
    const { smsTemplateId, smsSignId, judgeTypeList, effectCount, id, unit, filters, triggerEvent, name, templateId } = data
    if (data.id) {
      this.form = { smsTemplateId, smsSignId, judgeTypeList, effectCount, unit, id, filters, triggerEvent, name, templateId }
    } else {
      this.form = {
        smsSignId: '',
        smsTemplateId: '',
        judgeTypeList: [],
        effectCount: 7,
        unit: 3,
        filters: [],
        triggerEvent: 3,
        name: '',
        templateId: ''
      }
    }
  }

  private ruleSpareParts: object = {
    templateId: [{ required: true, message: '请选择满意度模版', trigger: 'change' }],
    triggerEvent: [{ required: true, message: '请选择触发事件', trigger: 'change' }],
    name: [{ required: true, message: '请输入满意度名称', trigger: 'blur' }]
  }

  private fetchTemplateList () {
    commonAction({ url: '/server-work/action/satisfaction/template/list', method: 'post', data: { modelId: this.$route.params.businessId } }).then(res => {
      if (res.success) {
        this.list = res.data?.voList || []
      }
    })
  }

  private beforeMount () {
    this.fetchTemplateList()
  }
}
</script>

<style lang="stylus" scoped>
.sms-text {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  margin-top: 8px;
}
.msg-templ {
  display: flex;
}
.tip {
  font-size: 12px;
  font-weight: 400;
  color: #767E91;
}
.varField {
  position: absolute;
  top: -48px;
  right: 0px;
}
.el-select
  width 100%
.sms-block
  background: #FBFBFB;
  border-radius: 4px;
  padding: 16px;
</style>
